<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<jsp:include page="/comm/header.jsp" />
<script type="text/javascript">
<!--
	
	function textTrim(str){
		var reg = /^\s+|\s+$/g;
		return str.replace(reg, "");
	}
	
	var doSubmit = function(){
		var x = validEmail();
		var y = validPwd2();
		var z = validCaptcha();
		if(x && y && z){
			document.form1.action = "register.htm";
			document.form1.submit(); 
		}
	};
	
	$(function(){
		$("#mail").focus(function(){
			$("#mailTip").html("<font>请填写有效邮箱，用以登陆网站</font>");
		}); 
		$("#pwd1").focus(function(){
			$("#pwd1Tip").html("<font>6-16位字母、数字，不支持空格</font>");
		}); 
		$("#pwd2").focus(function(){
			$("#pwd2Tip").html("<font>请再次输入登录密码，两次输入必须一致</font>");
		}); 
		
		$("#mail").blur(validEmail);
		$("#pwd1").blur(validPwd1);
		$("#pwd2").blur(validPwd2);
		$("#captcha").blur(validCaptcha);
		$("#but_submit").click(doSubmit);
		$("#icaptcha").click(refreshCaptcha);
		$("#acaptcha").click(refreshCaptcha);
		
		$("#captcha").bind('keyup',function(event) {
			if(event.keyCode==13){
				doSubmit();
			}
		});
		
	});
	
	var	validEmail = function(){
		var mail = $("#mail").val();
		mail = textTrim(mail);
		$("#mail").val(mail);
		if(!$("#mail").val()){
			$("#mailTip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能为空</font>");
			return false;
		}else{
		  	var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		  	if(reg.test(mail)){
	  			return isSameEmail(mail);
		  	}else{
		  		$("#mailTip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>请输入有效的邮箱地址</font>");
		  		return false;
		  	}
		}
	};
	
	var isSameEmail = function(mail){
		var flag = false;
		$.ajax({
  			type:"POST",
  			url:"isSameEmail.htm",
  			async: false,
  			data:{email:mail},
  			datatype:"text",
  			success:function(data){
  				if(data == "true"){
  					$("#mailTip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>对不起，此邮箱已经被人占用!</font>");
  				}else{
  					$("#mailTip").html("<img src='<%=path%>/images/yes.gif'/>");
  					flag = true;
  				}
  		    }	
  		});	
		return flag;
	};
	
	var validPwd1 =  function(){
		var pwd = $("#pwd1").val();
		if(!pwd){
			$("#pwd1Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能为空</font>");
			return false;
		}else{
			var reg = /^\d+$/;
			if(reg.test(pwd)){
				$("#pwd1Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能全为数字</font>");
				return false;
			}else{
				var reg = /^[A-Za-z]*$/;
				if(reg.test(pwd)){
					$("#pwd1Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能全为字母</font>");
					return false;
				}
			}
			
			if(pwd.search(/^\s+$/) != -1){
				$("#pwd1Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能包含非法字符</font>");
				return false;
			}
			
			if(pwd.length > 5 && pwd.length < 17){
				$("#pwd1Tip").html("<img src='<%=path%>/images/yes.gif'/>");
				return true;
			}else{
				$("#pwd1Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>密码必须为6-16位字符</font>");
				return false;
			}
			
		}
	};
	
	var validPwd2 = function(){
		var pwd1 = $("#pwd1").val();
		var pwd2 = $("#pwd2").val();
		if(!validPwd1()){
			$("#pwd2Tip").html("");
			return false;
		}
		if(!pwd2){
			$("#pwd2Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>再输一次密码</font>");
			return false;
		}else{
			if(pwd1 ==  pwd2){
				$("#pwd2Tip").html("<img src='<%=path%>/images/yes.gif'/>");
				return true;
			}else{
				$("#pwd2Tip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>两次密码输入不一致</font>");
				return false;
			}
		}
	};
	
	var validCaptcha = function(){
		var captcha = $("#captcha").val();
		if(!captcha){
			$("#captchaTip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>不能为空</font>");
			return false;
		}else{
			return isSameCaptcha(captcha);
		}
	};
	
	var isSameCaptcha = function(captcha){
		var flag = false;
		$.ajax({
  			type:"POST",
  			url:"isSameCaptcha.htm",
  			async: false,
  			data:{captcha:captcha},
  			datatype:"text",
  			success:function(data){
  				if(data == "true"){
  					$("#captchaTip").html("<img src='<%=path%>/images/yes.gif'/>");
  					flag = true;
  				}else{
  					$("#captchaTip").html("<img src='<%=path%>/images/no.gif'/><font color='red'>验证码错误</font>");
  				}
  		    }	
  		});	
		return flag;
	};
	
	var refreshCaptcha = function(){
		var src = "captcha.png";
		src += '?'+Math.random();
		$("#icaptcha").attr("src", src);
	};
	
//-->
</script>

<div class="clear"></div>

<!--第1部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
        
    	<div class="outbox">
        
        	<div class="reg_tt">
        		<div class="wrap_left"><img src="images/icon_reg.gif" /></div>
            	<div class="wrap_left">
            		<span class="span8"></span><br />

            		<div class="reg_msg_box">
            			<span class="span8">欢迎您加入代购岛，这里有世界各地的经纪人为您提供无忧代购服务! </span><br />
                    	<span class="span7">注册会员</span>
                    </div>
           		</div>
            	<div class="clear"></div>
            </div>
            <form name="form1" method="post">
        	<div class="reg_main">
            	<li>登录邮箱：<input id="mail" name="userModel.email" type="text" class="input1" />&nbsp;&nbsp;<span id="mailTip"></span></li>
                <li>登录密码：<input id="pwd1" name="userModel.password" type="password" class="input1" maxlength="16"/>&nbsp;&nbsp;<span id="pwd1Tip"></span></li>
                <li>确认密码：<input id="pwd2" type="password" class="input1" maxlength="16"/>&nbsp;&nbsp;<span id="pwd2Tip"></span></li>
                <li><span style="margin-left:14px">验证码：</span><input id="captcha" type="text" class="input1" size="5"/>
                <img id="icaptcha" src="captcha.png" width="70px" height="30px" style="cursor:pointer"/><span><a id="acaptcha" style="cursor:pointer">看不清，换一张</a></span>
                &nbsp;&nbsp;<span id="captchaTip"></span></li>
                <li><span style="margin-left:70px">请阅读<a target="_blank" style="color:#961212" href="<%=path%>/comm/agreement.jsp">《代购岛服务协议》</a></span></li>
                <li><div class="register_but"><span style=" margin-left:10px"><input type="button" class="register" id="but_submit" value="同意协议并注册" style="cursor:pointer"/></span></div></li>
            </div>
            </form>
      </div>

    </div>
<!--第1部分结束  --> 
<jsp:include page="/comm/bottom.jsp" />
